<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单元素：采集用户信息，并提交信息到服务器 
		采集用户信息元素 input 必须属性 type决定input呈现效果
		重点掌握type中属性值     text       文本框   【省略】
		                        password   密文文本框
								submit     提交
								button     按钮  【html4.0写法加value="按钮名称"】
								reset      重置  结合表单元素
								color      颜色
								datetime-local  本地日期时间插件
								date       年月日插件
								time       时分插件
								week       周插件
								range      滑块
								file       文件
								radio      单选框  结合name   checked默认选择
								check      复选框    checked默认选择
								image      图片按钮  结合src属性使用
								hidden     隐藏 结合JS
								
		-->
		<form>
			<h1>控件元素</h1>
		账号：<input type="text"><br	/>
		账号1：<input />
		密码：<input type="password"><br/>
		<input type="submit"/>
		<input type="button"value="自定义按钮">
		<!-- html5.0写法 -->
		<button>点击按钮</button>
		<input type="reset"><br/>
		<input type="color">
		<input type="datetime-local">
		<input type="date">
		<input type="time">
		<input type="week">
		<input type="range">
		<input type="file"><br/>
		男<input type="radio"name="aaa"checked="checked"/>
		女<input type="radio"name="aaa"/>
		<input type="checkbox"checked/>锅包肉
		<input type="checkbox"/>麻辣烫
		<input type="checkbox"/>佛跳墙
		<input type="image"src="img/3.gif"/>
		<input type="hidden"/>
		<h1>下拉列表元素</h1>
		<!-- 层叠元素：快捷键：select>option -->
		发车时间：<select>
			<option >00:00--24:00</option>
			<option >00:00--06:00</option>
			<option >06:00--12:00</option>
			<option >12:00--18:00</option>
			<option >18:00--24:00</option>
		</select>
		<!-- 超大文本框元素 :cols列属性  rows行属性-->
		<h1>超大文本框元素</h1>
		建议：<textarea cols="50"rows="10"></textarea>
		<!-- 细节元素  层叠元素 快捷键：details>summary+div -->
		<h1>细节元素</h1>
		<details>
			<summary>征婚启示</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem explicabo quasi itaque! Cumque harum consequatur hic libero corrupti? Sapiente sequi quam accusamus odio vitae, ea esse natus iste neque expedita. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci, molestiae minus at vitae placeat deleniti dolore sed exercitationem fugit accusantium est ut? Fugit fuga, corporis tenetur temporibus fugiat sequi ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia labore debitis error, minima commodi hic optio quis aspernatur accusamus beatae ipsa id, ex facere eos perferendis odio sit dolor veniam.</div>
		</details>
		</form>
		
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假啦</mark>
		<!-- 度量元素 value度量单位="默认：0min~1max"值  指定最大值跟最小值
		min属性  max属性
		-->
		电量：<meter value="50" min="0" max="100"></meter>
		
		
		<h1>——>>求职申请<<——</h1>
		<table cellspacing="0"cellpadding="5">
			<tr>
				<td>用户名：</td>
				<td><input type="text"></td>
			</tr>
			<tr>
				<td>&nbsp&nbsp&nbsp密码：</td>
				<td><input type="password"></td>
			</tr>
			<tr>
				<td>&nbsp&nbsp&nbsp性别：</td>
				<td>
					<input type="radio"name="sex"/>男
					<input type="radio"name="sex"/>女
					<input type="radio"name="sex"/>不透露
				</td>
			</tr>
			<tr>
				<td>&nbsp&nbsp&nbsp头像：</td>
				<td><input type="file"></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="submit"/>
					<input type="reset"value="清除">
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="checkbox">不要公开我的信息</td>
			</tr>
		</table>
	</body>
</html>